<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
	
	<!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script src="${path}/statics/js/jquery-1.8.3.js"></script>
	 <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        $.post("${path}/echartsCtl/articleTypeBar",function(res){
        	// 使用
            require(
                [
                    'echarts',
                    'echarts/chart/line',
                    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('main')); 
                    
                    var option = {
                    	    title : {
                    	        text: '文章类型数量分布',
                    	        subtext: '纯属虚构'
                    	    },
                    	    tooltip : {
                    	        trigger: 'axis'
                    	    },
                    	    legend: {
                    	        data:['总量','已发布','未发布']
                    	    },
                    	    toolbox: {
                    	        show : true,
                    	        feature : {
                    	            mark : {show: true},
                    	            dataView : {show: true, readOnly: false},
                    	            magicType : {show: true, type: ['line', 'bar']},
                    	            restore : {show: true},
                    	            saveAsImage : {show: true}
                    	        }
                    	    },
                    	    calculable : true,
                    	    xAxis : [
                    	        {
                    	            type : 'category',
                    	            data : res.typeNameList
                    	        }
                    	    ],
                    	    yAxis : [
                    	        {
                    	            type : 'value'
                    	        }
                    	    ],
                    	    series : [
                    	        {
                    	            name:'总量',
                    	            type:'bar',
                    	            data:res.typeCountList,
                    	            markPoint : {
                    	                data : [
                    	                    {type : 'max', name: '最大值'},
                    	                    {type : 'min', name: '最小值'}
                    	                ]
                    	            },
                    	            markLine : {
                    	                data : [
                    	                    {type : 'average', name: '平均值'}
                    	                ]
                    	            }
                    	        },
                    	        {
                    	            name:'已发布',
                    	            type:'bar',
                    	            data:res.typeCountList1,
                    	            markPoint : {
                    	                data : [
                    	                    {type : 'max', name: '最大值'},
                    	                    {type : 'min', name: '最小值'}
                    	                ]
                    	            },
                    	            markLine : {
                    	                data : [
                    	                    {type : 'average', name: '平均值'}
                    	                ]
                    	            }
                    	        },
                    	        {
                    	            name:'未发布',
                    	            type:'bar',
                    	            data:res.typeCountList2,
                    	            markPoint : {
                    	                data : [
                    	                    {type : 'max', name: '最大值'},
                    	                    {type : 'min', name: '最小值'}
                    	                ]
                    	            },
                    	            markLine : {
                    	                data : [
                    	                    {type : 'average', name: '平均值'}
                    	                ]
                    	            }
                    	        }
                    	    ]
                    	};
                    	                    
            
                    // 为echarts对象加载数据 
                    myChart.setOption(option); 
                }
            );
        },"json")
        
    </script>


</body>
</html>